<template>
  <div>
    <a-modal
      :title="$t('session_timeout_re_login')"
      centered
      :maskClosable="false"
      :closable="false"
      :width="400"
      v-model="visible" 
      :footer="null"
    >
      <a-form
        id="components-form-demo-normal-login"
        :form="form"
        @submit="handleSubmit"
      >
        <a-form-item>
          <a-input
            v-decorator="[
              'userCode',
              { initialValue: userCode,  }
            ]"
            :placeholder="$t('user_code')"
            size="large"
            read-only
          >
            <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input-password
            v-decorator="[
              'password',
              { rules: [{ required: true, message: $t('please_input') + $t('password') + $t('exclamation_mark') }] }
            ]"
            type="password"
            :placeholder="$t('password')"
            size="large"
          >
            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <a-row :gutter="12">
            <a-col :span="12">
              <a-button
                class="login-form-button"
                size="large"
                @click="handleCancel"
              >
                {{ $t('modal_cancel') }}
              </a-button>
            </a-col>
            <a-col :span="12">
              <a-button
                type="primary"
                html-type="submit"
                class="login-form-button"
                size="large"
                :disabled="loginBtnDisabled"
              >
                {{ $t('login') }}
              </a-button>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
    </a-modal>
    <PasswordChange :displayLink="false" ref="passwordChange" />
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs';
import router from '@/global/router.js'
import md5 from 'md5'

export default {
  computed: {
    visible: function () {
      return this.$store.state.modalLoginVisible
    },
    userCode: function () {
      return this.$store.state.userInfo.userCode
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, {name: 'ModalLogin'}),
      loginBtnDisabled: false,
    }
  },
  methods: {
    handleCancel () {
      this.$store.commit('closeModalLogin')
      router.push({ name: 'Login', params: {} })
    },
    handleSubmit (e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (err) {
          return;
        }
        values.password = md5(values.password)
        this.loginBtnDisabled = true
        // 登录
        axios({
          method: 'post',
          url: '/infra/security/login',
          data: qs.stringify(values),
        }).then(res=>{
          let authToken = res.data.authToken
          localStorage.setItem('authToken', authToken)
          axios.defaults.headers.common['Authorization'] = authToken

          if (res.data.forceChangePwd) {
            this.$refs.passwordChange.showModal()
          } else {
            this.$store.commit('closeModalLogin')
            this.$store.dispatch('loadUserInfo')
            this.$store.dispatch('loadDict')
          }
          
        }).finally(()=>{
          this.loginBtnDisabled = false
        })
      });
    },
  },
};
</script>
<style scoped>

#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>